<template>
    <el-form ref="speedFormRef" :model="baseForm" label-width="100px" class="pos-dr">
      <el-row :gutter="0">
        <el-col :span="12">
          <el-form-item label="X" prop="x">
            <el-input v-model.number="baseForm.x" />
          </el-form-item>
        </el-col>          
        <el-col :span="11">
          <el-form-item label="Rx" prop="Rx">
            <el-input v-model.number="baseForm.Rx" />
          </el-form-item>
        </el-col> 
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="Y" prop="y">
            <el-input v-model.number="baseForm.y" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="Ry" >
            <el-input v-model.number="baseForm.Ry" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="Z" prop="z">
            <el-input v-model.number="baseForm.z" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="Rz" prop="Rz">
            <el-input v-model.number="baseForm.Rz" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="Speed" prop="Speed">
            <el-input v-model.number="baseForm.Speed" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="9" :span="13">
          <el-form-item>
            <el-button class="pry-btn" @click="onSubmit">移动到指定位置</el-button>
            <el-button class="cancel-btn" @click="handleStop">停止</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { manualMoveApi, stopRobotApi } from '@/api/robot-api.js'
import { failedNotify, successNotify } from '@/comm/index.js'

const baseForm = reactive({
  x: 100,
  y: 1000,
  z: 10,
  Rx: 10,
  Ry: 0,
  Rz: 0,
  Speed: 0
})
const speedFormRef = ref()

const onSubmit = () => {
  manualMoveApi(baseForm, response => {
    successNotify('持续行驶成功');
    console.log('持续行驶成功', response);
  },
  (error) => {
    failedNotify('持续行驶失败')
    console.log('持续行驶失败', error)
  })
}

const resetForm = (formEl) => { 
  if (!formEl) return; 
  formEl.resetFields(); 
}

const handleStop = () => {
  stopRobotApi((response)=> {
    successNotify('持续停止成功');
    console.log("停止成功", response)
  }, () => {
    failedNotify('持续停止失败')
    console.log("停止失败")
  })
}
</script>

<style lang="scss" scoped>
.pos-dr {
// margin-left: 5em;
// width: 100%;
padding-top: 2.5em;
}
</style>